<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" title="云直播商品列表" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition" class="tabform" @submit.native.prevent>
                <Row :gutter="24" type="flex">
                    <Col span="24">
                    <FormItem label="搜索：">
                        <Input search enter-button @on-search="selChange" placeholder="请输入商品名称/ID" element-id="name" v-model="formValidate.kerword" style="width: 30%;" />
                    </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col v-bind="grid">
                    <Button type="primary" @click="menusAdd('添加直播间')" icon="md-add">添加商品
                    </Button>
                    <Button type="error" @click="delGoodList" class="ml20" :disabled="!selectionList.length" >批量删除</Button>
                    <!-- <Button v-auth="['setting-system_menus-add']" icon="md-list" type="danger"
                         style="margin-left: 20px;">同步商品
                    </Button> -->
                    </Col>
                </Row>
            </Form>
            <Table :columns="columns1" @on-selection-change="onSelectTab" @on-select-all="selectAll" @on-select-all-cancel="selectAll" :data="tabList" ref="table" class="mt25" :loading="loading" highlight-row no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
                <template slot-scope="{ row, index }" slot="name">
                    <div class="product_box">
                        <!-- <viewer>
                            <img :src="row.product.image" alt="">
                        </viewer> -->
                        <div class="txt">{{row.name}}</div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="cost_price">
                    <div>{{row.cost_price}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="stock">
                    <div>{{row.product.stock}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="status">
                    <div>{{row.audit_status | liveStatusFilter}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="is_mer_show">
                    <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
                        <span slot="open">显示</span>
                        <span slot="close">隐藏</span>
                    </i-switch>
                </template>
                <template slot-scope="{ row, index }" slot="is_hot">
                    <i-switch v-model="row.is_hot" :value="row.is_hot" :true-value="1" :false-value="0" @on-change="onchangeisHot(row)" size="large">
                        <span slot="open">显示</span>
                        <span slot="close">隐藏</span>
                    </i-switch>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <a @click="edit(row, '编辑')">详情</a>
                    <Divider type="vertical" />
                    <a @click="del(row,'删除这条信息',index)">删除</a>
                </template>
            </Table>
            <div class="acea-row row-right page">
                <Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange" :page-size="formValidate.limit" />
            </div>
        </Card>
        <!--详情-->
        <Modal v-model="modals" title="商品详情" class="paymentFooter" scrollable width="700" :footer-hide="true">
            <goodsFrom ref="goodsDetail" />
        </Modal>
    </div>
</template>
<script>
import { mapState } from "vuex";
import _ from 'underscore';
import { liveList, liveGoods, liveSyncGoods, liveGoodsDetail, liveGoodsShow,liveGoodsDel,goodsSetHot } from '@/api/cloudlive'
import goodsFrom from './components/goods_detail'
export default {
    name: "live",
    components: {
        goodsFrom
    },
    data() {
        return {
            grid: {
                xl: 7,
                lg: 7,
                md: 12,
                sm: 24,
                xs: 24
            },
            formValidate: {
                status: '',
                kerword: '',
                page: 1,
                limit: 20
            },
            columns1: [{
                    width: 60,
                    align: "center",
                    renderHeader: (h, params) => {
                        return h(
                            "div", {
                                class: {
                                    "select-panel": true,
                                },
                                on: {
                                    mouseenter: (e) => {
                                        this.display = "block";
                                    },
                                    mouseleave: (e) => {
                                        this.display = "none";
                                    },
                                },
                            },
                            [
                                h("Checkbox", {
                                    props: {
                                        value: this.checkBox,
                                    },
                                    on: {
                                        "on-change": (e) => {
                                            this.checkBox = e;
                                            this.$refs.table.selectAll(this.checkBox);
                                            this.isAll = e ? 0 : -1;
                                        },
                                    },
                                }),
                                h(
                                    "div", {
                                        style: {
                                            position: "absolute",
                                            top: 0,
                                            zIndex: 2,
                                            display: this.display,
                                            width: "80px",
                                            // height: "100%",
                                            padding: "5px",
                                            borderRadius: "4px",
                                            backgroundColor: "#fff",
                                            transform: "translateX(25%)",
                                        },
                                    },
                                    [
                                        h(
                                            "div", {
                                                class: {
                                                    "select-item": true,
                                                    on: this.isAll === 0,
                                                },
                                                style: {
                                                    padding: "1px 6px",
                                                    cursor: "pointer",
                                                    height: "50%",
                                                },
                                                on: {
                                                    click: (e) => {

                                                        if (this.isAll === 0) {
                                                            this.isAll = -1;
                                                            this.checkBox = false;
                                                            this.$refs.table.selectAll(this.checkBox);
                                                        } else {
                                                            this.isAll = 0;
                                                            if (!this.selectionList.length) {
                                                                this.checkBox = true;
                                                                this.$refs.table.selectAll(this.checkBox);
                                                            }
                                                        }
                                                        this.display = "none";
                                                    },
                                                },
                                            },
                                            // "选择当页"
                                        ),
                                        h(
                                            "div", {
                                                class: {
                                                    "select-item": true,
                                                    on: this.isAll === 1,
                                                },
                                                style: {
                                                    padding: "4px",
                                                    cursor: "pointer",
                                                    // height: "50%",
                                                },
                                                on: {
                                                    click: (e) => {
                                                        if (this.isAll === 1) {
                                                            this.isAll = -1;
                                                            this.checkBox = false;
                                                        } else {
                                                            this.isAll = 1;
                                                            this.checkBox = true;
                                                        }
                                                        this.$refs.table.selectAll(this.checkBox);
                                                        this.display = "none";
                                                    },
                                                },
                                            },
                                            "选择全部"
                                        ),
                                    ]
                                ),
                            ]
                        );
                    },
                    render: (h, params) => {
                        return h("Checkbox", {
                            props: {
                                value: params.row.checkBox,
                            },
                            on: {
                                "on-change": (e) => {
                                    if (e) {
                                        this.selectionList.push(params.row);
                                    } else {
                                        this.checkBox = false;
                                        this.selectionList.forEach((item, index) => {
                                            if (item.id === params.row.id) {
                                                this.selectionList.splice(index, 1);
                                            }
                                        });
                                    }
                                    this.isAll = this.selectionList.length ? 0 : -1;
                                    // this.responseData为查询出的结果数据
                                    // params.row.checkBox = e;
                                    params.row.checkBox = e;
                                    this.tabList[params.index].checkBox = e;
                                },
                            },
                            ref: "checkbox",
                            refInFor: true,
                        });
                    },
                },
                { "key": "product_id", "title": "商品ID", "width": 50 },
                { "slot": "name", "minWidth": 40, "title": "商品名称" },
                { "key": "room_name", "minWidth": 35, "title": "直播间" },
                { "key": "live_time", "minWidth": 35, "title": "开启时间" },
                { "key": "price", "minWidth": 35, "title": "直播价" },
                { "slot": 'cost_price', "minWidth": 35, "title": "原价" },
                /*{ "slot": "stock", "minWidth": 35, "title": "库存" },*/
                { "slot": "is_mer_show", "title": "是否显示", "minWidth": 50 },
                { "slot": "is_hot", "title": "热门", "minWidth": 80 },
                { "key": "sort", "title": "排序", "minWidth": 35 },
                { "slot": "action", "fixed": "right", "title": "操作", "minWidth": 120 }
            ],
            tabList: [],
            loading: false,
            modals: false,
            /******************/
            array_ids: [],
            selectionList: [],
            good_ids: "",
            selectionCopy: [],
            checkBox: false,
            isAll:-1,
            /******************/
            total: 0
        }
    },
    computed: {
        ...mapState('admin/layout', [
            'isMobile'
        ]),
        labelWidth() {
            return this.isMobile ? undefined : 80;
        },
        labelPosition() {
            return this.isMobile ? 'top' : 'left';
        }
    },
    mounted() {
        this.getRoomsList().then((res) => {
            this.roomsList = res.data.list;
            this.getList();
        })
    },
    methods: {
        selectAll(row) {
            if (row.length) {
                this.selectionList = row;
                this.selectionCopy = row;
            }
            this.selectionCopy.forEach((item, index) => {
                item.checkBox = this.checkBox;
                this.$set(this.tabList, index, item);
            });
        },
        // 全选
        onSelectTab(selection) {
            this.selectionList = selection;
            let data = [];
            this.selectionList.map((item) => {
                data.push(item.id);
            });
            this.array_ids = data;
            this.good_ids = data.join(",");
        },
        delGoodList(){
            let ids = [];
            this.selectionList.forEach(item=>{
                ids.push(item.id);
            });
            let delfromData = {
                title: '批量删除数据',
                url: `cloud_live/goods/delete`,
                method: 'post',
                ids: {ids}
            };
            this.$modalSure(delfromData).then((res) => {
                this.$Message.success(res.msg);
                this.getList();
            }).catch(res => {
                this.$Message.error(res.msg);
            });

            /*liveGoodsDel({ids}).then(res=>{

            })*/
        },
        // 分页
        pageChange(index) {
            this.formValidate.page = index
            this.getList();
        },
        // 直播间显示隐藏
        onchangeIsShow({ id, is_show }) {
            liveGoodsShow(id, is_show).then(res => {
                this.$Message.success(res.msg)
            }).catch(error => {
                this.$Message.error(error.msg)
            })
        },
        // 直播间显示隐藏
        onchangeisHot(row) {
            goodsSetHot(row.id, row.is_hot ).then(res => {
                this.$Message.success(res.msg)
            }).catch(error => {
                this.$Message.error(error.msg)
            })
        },
        // 列表数据
        getList() {
            this.loading = true
            liveGoods(this.formValidate).then(res => {
                this.total = res.data.count;
                this.tabList = res.data.list.map(good => {
                    let roomObj = _.findWhere(this.roomsList, { id: good.room_id });
                    good.room_name = roomObj ? roomObj.title : '已删除';
                    good.checkBox = false;
                    return good;
                });
                this.selectionList = [];
                this.loading = false
            }).catch(error => {
                this.$Message.error(error.msg)
                this.loading = false
            })
        },
        // 选择
        selChange() {
            this.formValidate.page = 1;
            this.getList();
        },
        // 添加商品
        menusAdd() {
            this.$router.push({
                path: '/admin/marketing/cloud_live/add_live_goods'
            })
        },
        // 同步商品
        syncGoods() {
            liveSyncGoods().then(res => {
                this.$Message.success(res.msg)
                this.getList()
            }).catch(error => {
                this.$Message.error(res.msg)
            })
        },
        edit(row) {
            this.modals = true
            this.$refs.goodsDetail.getData(row.id)
        },
        // 删除
        del(row, tit, num) {
            let delfromData = {
                title: tit,
                num: num,
                url: `cloud_live/goods/del/${row.id}`,
                method: 'DELETE',
                ids: ''
            };
            this.$modalSure(delfromData).then((res) => {
                this.$Message.success(res.msg);
                this.tabList.splice(num, 1);

                this.getList();
            }).catch(res => {
                this.$Message.error(res.msg);
            });
        },
        getRoomsList() {
            return liveList({ page: 1, limit: 200 })
        }
    }
}
</script>
<style scoped lang="stylus">
.product_box {
    display: flex;
    align-items: center;

    img {
        width: 36px;
        height: 36px;
    }

    .txt {
        color: #000;
        font-size: 12px;
    }
}
</style>